<!doctype html>
<html>
<head>
<title>组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  <button-counter></button-counter>
	</div>

<script>
	
	var a=new Vue({
		el:'#app',
		components:{
			'button-counter': {
				data: function () {
					return {
					count: 0
					}
				},
				template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
			}
		}
	
	})
	</script>
	
	<div id="id2">
		<div v-bind:style="{fontSize:postFontSize+'em'}">
			<blog-post
				v-for="post in posts"
				v-bind:key="post.id"
				v-bind:post="post"
				v-on:enlarge-text="postFontSize += 0.1"
			></blog-post>
		</div>
	</div>
	
	
	<script>
		var vm= new Vue({
			el:'#id2',
			data:{
				posts:[],
				postFontSize:1
			},
			components:{
				'blog-post':{
					props: ['post'],
					template: `
					<div class="blog-post">
					  <h3>{{ post.title }}</h3>
					  <button v-on:click="$emit('enlarge-text')">
						Enlarge text
					  </button>
					  <div v-html="post.content"></div>
					</div>
					`
				}
			}
		})
	</script>
	
	<!--v-model用在组件上：<custom-input
								v-bind:value="searchText"
								v-on:input='searchtext=$event'
							></custom-input>  在这个组件内，（1）将其value特性绑定到一个名叫value的prop上；
							（2）在其input事件触发时，将新的值通过自定义的input事件抛出-->
	<alert-box>
	  Something bad happened.
	</alert-box>
	
	<script>
	new Vue({
		el:'.demo-alert-box'
	})
	Vue.component('alert-box', {
		template: `
			<div class="demo-alert-box">
			  <strong>Error!</strong>
			  <slot></slot>
			</div>
		`
	})
	
	</script>
</body>
</html>